import React, { useEffect } from 'react'
import { Button, Checkbox, Form, type FormProps, Input } from 'antd'

import type { FC } from 'react'

interface IProps {
  role: IRoleType.IRole
  setRoleHandle: (item: IRoleType.IRole) => void
}

const DataForm: FC<IProps> = ({ role, setRoleHandle }) => {
  const [form] = Form.useForm()
  const onFinish: FormProps<IRoleType.IRoleForm>['onFinish'] = (values) => {
    if (role.id) {
      // 修改
      console.log('修改')
      setRoleHandle({} as IRoleType.IRole)
      form.resetFields()
    } else {
      // 添加
      console.log('添加')
    }
    console.log('Success:', values)
  }

  useEffect(() => {
    form.setFieldsValue(role)
  }, [role])

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 6 }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="角色名称"
        name="name"
        rules={[
          { required: true, whitespace: true, message: '角色名称不能为空' }
        ]}
        extra={<div>例：管理员</div>}
      >
        <Input placeholder="请输入角色名称" />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 4, span: 6 }}>
        <Button type="primary" htmlType="submit">
          保存角色信息
        </Button>
      </Form.Item>
    </Form>
  )
}

export default DataForm
